<template>
  <div class="carousel-container" :style="{ width: containerWidth }">
    <!-- 轮播图片容器 -->
    <div
      class="carousel-wrapper"
      :style="{
        transform: `translateX(-${currentIndex * 100}%)`,
        transition: isTransition ? 'transform 0.5s ease' : 'none'
      }"
    >
      <!-- 复制第一张图到末尾（实现无缝滚动） -->
      <img
        v-for="(item, index) in [...images, images[0]]"
        :key="index"
        :src="item.src"
        :alt="item.alt || `轮播图${index + 1}`"
        class="carousel-img"
        loading="lazy"
      />
    </div>

    <!-- 左右切换箭头 -->
    <button
      class="carousel-arrow left"
      @click="prevSlide"
      :disabled="isDisabled"
    >
      ←
    </button>
    <button
      class="carousel-arrow right"
      @click="nextSlide"
      :disabled="isDisabled"
    >
      →
    </button>

    <!-- 指示器圆点 -->
    <div class="carousel-indicators">
      <span
        v-for="(item, index) in images"
        :key="index"
        class="indicator-dot"
        :class="{ active: index === currentIndex }"
        @click="goToSlide(index)"
      ></span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'

//  props 定义（支持外部配置）
const props = defineProps({
  // 轮播图片数组：[{ src: '图片地址', alt: '描述' }]
  images: {
    type: Array,
    required: true,
    validator: (val) => val.length > 0 // 至少1张图
  },
  // 自动播放间隔（毫秒），0 表示不自动播放
  autoPlay: {
    type: Number,
    default: 3000
  },
  // 容器宽度（支持 px/%/vw）
  containerWidth: {
    type: String,
    default: '100%'
  },
  // 是否显示指示器
  showIndicators: {
    type: Boolean,
    default: true
  },
  // 是否显示箭头
  showArrows: {
    type: Boolean,
    default: true
  }
})

// 状态管理
const currentIndex = ref(0) // 当前激活的图片索引
const isTransition = ref(true) // 是否启用过渡动画
const isDisabled = ref(false) // 按钮禁用状态（防止快速点击）
let timer = null // 自动播放定时器

// 计算属性：控制箭头和指示器显示
const showArrowsComputed = computed(() => props.showArrows && props.images.length > 1)
const showIndicatorsComputed = computed(() => props.showIndicators && props.images.length > 1)

// 下一张
const nextSlide = () => {
  if (props.images.length <= 1) return
  isDisabled.value = true // 禁用按钮防止重复点击
  isTransition.value = true

  if (currentIndex.value === props.images.length - 1) {
    // 最后一张图时，先切换到复制的第一张图（视觉无缝）
    currentIndex.value = props.images.length
    // 动画结束后，重置索引到 0（无动画）
    setTimeout(() => {
      isTransition.value = false
      currentIndex.value = 0
      isDisabled.value = false
    }, 500) // 与过渡动画时长一致
  } else {
    currentIndex.value++
    setTimeout(() => (isDisabled.value = false), 500)
  }
}

// 上一张
const prevSlide = () => {
  if (props.images.length <= 1) return
  isDisabled.value = true
  isTransition.value = true

  if (currentIndex.value === 0) {
    // 第一张图时，先重置到复制的最后一张图（无动画）
    isTransition.value = false
    currentIndex.value = props.images.length
    // 立即启用动画，切换到真正的最后一张图
    setTimeout(() => {
      isTransition.value = true
      currentIndex.value = props.images.length - 1
      isDisabled.value = false
    }, 10)
  } else {
    currentIndex.value--
    setTimeout(() => (isDisabled.value = false), 500)
  }
}

// 跳转到指定索引
const goToSlide = (index) => {
  if (index === currentIndex.value || props.images.length <= 1) return
  isDisabled.value = true
  isTransition.value = true
  currentIndex.value = index
  setTimeout(() => (isDisabled.value = false), 500)
}

// 初始化自动播放
const initAutoPlay = () => {
  if (props.autoPlay <= 0 || props.images.length <= 1) return
  clearInterval(timer)
  timer = setInterval(nextSlide, props.autoPlay)
}

// 组件挂载时初始化
onMounted(() => {
  initAutoPlay()
})

// 组件卸载时清除定时器
onUnmounted(() => {
  clearInterval(timer)
})

// 监听 autoPlay 变化，重新初始化自动播放
watch(
  () => props.autoPlay,
  () => {
    clearInterval(timer)
    initAutoPlay()
  }
)
</script>

<style scoped>
.carousel-container {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.carousel-wrapper {
  display: flex;
  height: 100%;
  width: calc(100% * (var(--image-count) + 1)); /* 额外加1张复制图的宽度 */
}

.carousel-img {
  width: 100%;
  height: auto;
  object-fit: cover; /* 保持图片比例，填充容器 */
}

/* 箭头样式 */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.3s ease;
}

.carousel-arrow.left {
  left: 15px;
}

.carousel-arrow.right {
  right: 15px;
}

.carousel-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.carousel-arrow:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.8);
}

/* 指示器样式 */
.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator-dot.active {
  background-color: #fff;
  width: 30px;
  border-radius: 5px; /* 激活态变成长圆形 */
}

/* 响应式调整：小屏幕箭头和指示器缩小 */
@media (max-width: 768px) {
  .carousel-arrow {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .indicator-dot {
    width: 8px;
    height: 8px;
  }

  .indicator-dot.active {
    width: 20px;
  }
}
</style>
<!--用法-->
<!--<template>-->
<!--  <div class="app">-->
<!--    <h1>Vue3 图片轮播示例</h1>-->

<!--    &lt;!&ndash; 基础用法 &ndash;&gt;-->
<!--    <div class="carousel-demo">-->
<!--      <h2>基础轮播（自动播放）</h2>-->
<!--      <Carousel :images="carouselImages" />-->
<!--    </div>-->

<!--    &lt;!&ndash; 自定义配置：禁用自动播放 + 固定宽度 &ndash;&gt;-->
<!--    <div class="carousel-demo">-->
<!--      <h2>自定义配置（禁用自动播放 + 固定宽度）</h2>-->
<!--      <Carousel-->
<!--        :images="carouselImages"-->
<!--        :autoPlay="0"-->
<!--        container-width="800px"-->
<!--      />-->
<!--    </div>-->

<!--    &lt;!&ndash; 隐藏指示器和箭头 &ndash;&gt;-->
<!--    <div class="carousel-demo">-->
<!--      <h2>隐藏指示器和箭头（仅自动播放）</h2>-->
<!--      <Carousel-->
<!--        :images="carouselImages"-->
<!--        :show-indicators="false"-->
<!--        :show-arrows="false"-->
<!--        container-width="600px"-->
<!--      />-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import Carousel from './components/Carousel.vue'-->

<!--// 轮播图片数据（实际项目中可从接口获取）-->
<!--const carouselImages = [-->
<!--  {-->
<!--    src: 'https://picsum.photos/id/237/1200/600', // 示例图片地址-->
<!--    alt: '图片1：小狗'-->
<!--  },-->
<!--  {-->
<!--    src: 'https://picsum.photos/id/1035/1200/600',-->
<!--    alt: '图片2：山脉风景'-->
<!--  },-->
<!--  {-->
<!--    src: 'https://picsum.photos/id/1019/1200/600',-->
<!--    alt: '图片3：湖泊森林'-->
<!--  },-->
<!--  {-->
<!--    src: 'https://picsum.photos/id/1015/1200/600',-->
<!--    alt: '图片4：雪山'-->
<!--  }-->
<!--]-->
<!--</script>-->

<!--<style scoped>-->
<!--.app {-->
<!--  max-width: 1200px;-->
<!--  margin: 0 auto;-->
<!--  padding: 20px;-->
<!--}-->

<!--.carousel-demo {-->
<!--  margin: 40px 0;-->
<!--  padding: 20px;-->
<!--  border: 1px solid #eee;-->
<!--  border-radius: 8px;-->
<!--}-->

<!--h2 {-->
<!--  margin-bottom: 20px;-->
<!--  font-size: 18px;-->
<!--  color: #333;-->
<!--}-->
<!--</style>-->
